<template>
  <div class="userinfo pub_navbar space">
    <van-nav-bar
      fixed
      title="修改用户资料"
      :border="false"
      left-arrow
      @click-left="onClickLeft"
      class="navbar"
    ></van-nav-bar>
    <div class="cells">
      <van-cell
        title="头像"
        @change.native="iconChange"
        @click="linkClick('icon')"
      >
        <template #extra>
          <div class="extra">
            <input
              type="file"
              ref="iconinput"
              v-show="false"
              name="icon"
              id="icon"
            />
            <van-image
              :src="
                userinfo.userInfo.icon
                  ? baseURL + userinfo.userInfo.icon
                  : 'https://img01.yzcdn.cn/vant/cat.jpeg'
              "
            ></van-image>
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>
      <van-cell
        title="昵称"
        @click="linkClick('username')"
        is-link
        :value="userinfo.userInfo.username"
      />
      <van-cell
        title="手机号"
        @click="linkClick('mobile')"
        is-link
        :value="userinfo.userInfo.mobile"
      />
      <van-cell
        title="性别"
        @click="linkClick('sex')"
        is-link
        :value="userinfo.userInfo.sex === 1 ? '女' : '男'"
      />
      <van-cell
        title="出生年月"
        @click="linkClick('birthday')"
        is-link
        :value="userinfo.userInfo.birthday"
      />
      <van-cell
        title="家庭住址"
        @click="linkClick('address')"
        is-link
        :value="userinfo.userInfo.address"
      />
      <van-cell
        title="个性留言"
        @click="linkClick('notes')"
        is-link
        :value="userinfo.userInfo.notes"
      />
    </div>
    <div class="popup_box">
      <my-popup
        :show="showPopup"
        @showChange="showChange"
        :popupHeight="popupHeight"
      >
        <template #top>
          <div class="avator popup_content_fill" v-show="curLink === 'icon'">
            <my-vue-cropper
              @getCropperBlob="getCropperBlob"
              @cancelCropper="cancelCropper"
              :img="img"
            ></my-vue-cropper>
          </div>
          <div class="sex" v-show="curLink === 'sex'">
            <my-picker
              title="修改性别"
              @onCancel="cancelController"
              :defaultIndex="userinfo.userInfo.sex"
              @onConfirm="confirmController"
            ></my-picker>
          </div>
          <div class="mobile popup_content_fill" v-show="curLink === 'mobile'">
            <my-popup-content
              navBarTitle="修改手机号"
              placeholder="请输入手机号"
              maxlength="11"
              :fieldValue="userinfo.userInfo.mobile || ''"
              @onClickLeft="cancelController"
              @onClickRight="confirmController"
            ></my-popup-content>
          </div>
          <div
            class="username popup_content_fill"
            v-show="curLink === 'username'"
          >
            <my-popup-content
              navBarTitle="修改昵称"
              placeholder="请输入昵称"
              maxlength="11"
              :fieldValue="userinfo.userInfo.username || ''"
              @onClickLeft="cancelController"
              @onClickRight="confirmController"
            ></my-popup-content>
          </div>
          <div
            class="address popup_content_fill"
            v-show="curLink === 'address'"
          >
            <my-popup-content
              navBarTitle="修改家庭地址"
              placeholder="请输入家庭地址"
              maxlength="100"
              :fieldValue="userinfo.userInfo.address || ''"
              @onClickLeft="cancelController"
              @onClickRight="confirmController"
            ></my-popup-content>
          </div>
          <div class="notes popup_content_fill" v-show="curLink === 'notes'">
            <my-popup-content
              navBarTitle="修改个性留言"
              placeholder="请输入个性留言"
              maxlength="30"
              :fieldValue="userinfo.userInfo.notes || ''"
              @onClickLeft="cancelController"
              @onClickRight="confirmController"
            ></my-popup-content>
          </div>
          <div
            class="birthday popup_content_fill"
            v-show="curLink === 'birthday'"
          >
            <my-popup-content
              navBarTitle="选择年月日"
              contentType="birthday"
              :fieldValue="userinfo.userInfo.birthday || ''"
              @onClickLeft="cancelController"
              @onClickRight="confirmController"
            ></my-popup-content>
          </div>
        </template>
      </my-popup>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { USERINFO } from '@/store/state-types'
import MyPopup from '@/components/MyPopup.vue'
import MyPicker from '@/components/MyPicker.vue'
import { SETUserInfoValues } from '@/store/mutations-types'
import { ActionsEditUserInfo } from '@/store/actions-type'
import MyPopupContent from '@/components/MyPopupContent.vue'
import MyVueCropper from '@/components/MyVueCropper.vue'
import { uploadUserAvator } from '@/api/user'
import { getDataURL } from '@/utils/file'
export default {
  name: 'userinfo',
  data() {
    return {
      baseURL: 'http://124.223.14.236:8060/',
      showPopup: false,
      popupHeight: '50%',
      curLink: '',
      img: ''
    }
  },

  computed: {
    ...mapState('user', [USERINFO])
  },
  methods: {
    linkClick(linkname) {
      const vm = this
      vm.curLink = linkname
      switch (linkname) {
        case 'mobile':
        case 'address':
        case 'username':
        case 'notes':
          vm.popupHeight = '100%'
          break
        case 'icon':
          vm.popupHeight = '100%'
          vm.iconInputClick()
          return
        case 'sex':
        case 'birthday':
          vm.popupHeight = '50%'
          break
        default:
          break
      }
      this.controlPopupShow(true)
    },
    cancelController() {
      this.controlPopupShow(false)
    },
    confirmController(newValue) {
      const curLink = this.curLink
      if (curLink === 'sex') {
        newValue = Number(newValue === '女')
      }
      this.baseInfoConfirm(curLink, newValue)
      this.controlPopupShow(false)
    },
    async baseInfoConfirm(key, value) {
      try {
        await this[ActionsEditUserInfo]({
          key,
          value
        })
        this.$toast.success('修改成功')
      } catch (error) {
        this.$toast.fail('修改失败,请重试')
      }
    },
    cancelCropper() {
      this.cancelController()
      this.$refs.iconinput.value = ''
    },
    getCropperBlob(data) {
      const fd = new FormData()
      fd.set('file', data)
      this.uploadIcon(fd)
      this.controlPopupShow(false)
    },
    async iconChange(e) {
      const file = e.target.files[0]
      try {
        const dataURL = await getDataURL(file)
        this.img = dataURL
        this.controlPopupShow(true)
      } catch (error) {
        this.$toast.fail('解析图片出错')
      }
    },
    async uploadIcon(fd) {
      try {
        const { data } = await uploadUserAvator(fd)
        this.baseInfoConfirm('icon', data.savePath)
      } catch (error) {
        this.$toast.fail('头像上传失败')
      }
    },
    iconInputClick() {
      const iconinput = this.$refs.iconinput
      iconinput.click()
    },
    controlPopupShow(state) {
      this.showPopup = state
    },
    onClickLeft() {
      this.$router.back()
    },
    startEdit() {
      this.controlPopupShow(true)
    },
    showChange(v) {
      this.controlPopupShow(v)
    },
    ...mapMutations('user', [SETUserInfoValues]),
    ...mapActions('user', [ActionsEditUserInfo])
  },
  components: {
    MyPopup,
    MyPicker,
    MyPopupContent,
    MyVueCropper
  }
}
</script>

<style scoped lang="less">
.userinfo {
  .extra {
    display: flex;
    width: 40px;
    justify-content: space-between;
    align-items: center;
  }
  .popup_content_fill {
    height: 100%;
  }
  ::v-deep {
    .popup_box {
      .van-nav-bar {
        border: none;
        background-color: #fff;
        .van-nav-bar__title {
          color: #323233;
        }
        .van-nav-bar__left,
        .van-nav-bar__right {
          .van-nav-bar__text {
            color: #1989fa;
          }
        }
      }
    }
  }
}
</style>
